<template>
  <div class="attendance-container">
    <h1>孩子考勤查看</h1>
    
    <!-- 显示当前用户信息 -->
    <div class="user-info">
      <p>欢迎，{{ userProfile.fullName }} (家长)</p>
      <router-link to="/parent/dashboard">返回Dashboard</router-link>
    </div>

    <!-- 孩子选择 -->
    <div v-if="userProfile.children && userProfile.children.length > 0" class="child-selection">
      <h2>选择孩子查看考勤记录</h2>
      <div class="child-bubbles">
        <div 
          v-for="(child, index) in userProfile.children" 
          :key="child.studentNumber" 
          class="child-bubble"
          :class="{ selected: selectedChild === child }"
          @click="selectChild(child)"
        >
          {{ child.fullName }}
        </div>
      </div>
    </div>

    <div v-else>
      <p>您还没有关联的孩子信息</p>
    </div>

    <!-- 考勤记录 -->
    <div v-if="selectedChild" class="attendance-records">
      <h2>{{ selectedChild.fullName }} 的考勤记录</h2>
      <div class="child-info">
        <p>学号: {{ selectedChild.studentNumber }}</p>
        <p>班级: {{ selectedChild.className }}</p>
        <p>性别: {{ selectedChild.gender }}</p>
      </div>
      <button @click="loadChildAttendanceRecords" class="refresh-btn">刷新记录</button>
      <table class="records-table">
        <thead>
          <tr>
            <th>日期</th>
            <th>状态</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in attendanceRecords" :key="record.id">
            <td>{{ formatDate(record.recordDate) }}</td>
            <td>{{ getAttendanceStatusText(record.status) }}</td>
            <td>{{ record.remarks || '无' }}</td>
          </tr>
          <tr v-if="!attendanceRecords || attendanceRecords.length === 0">
            <td colspan="3">暂无考勤记录</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-else class="prompt-message">
      <p>请选择一个孩子查看考勤记录</p>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 成功提示 -->
    <div v-if="success" class="success-message">
      {{ success }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'ParentAttendance',
  setup() {
    // 用户信息
    const userProfile = ref({});
    const selectedChild = ref(null);
    const attendanceRecords = ref([]);
    
    // 状态信息
    const error = ref('');
    const success = ref('');

    // 获取用户信息
    const loadUserProfile = async () => {
      try {
        const response = await fetch('/user/profile', {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          userProfile.value = result.data;
        } else {
          error.value = result.msg || '获取用户信息失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 选择孩子
    const selectChild = (child) => {
      selectedChild.value = child;
      attendanceRecords.value = [];
      loadChildAttendanceRecords();
    };

    // 获取孩子考勤记录
    const loadChildAttendanceRecords = async () => {
      if (!selectedChild.value) {
        error.value = '请先选择一个孩子';
        return;
      }

      try {
        // 使用学号查询考勤记录
        const studentNumber = selectedChild.value.studentNumber;
        if (!studentNumber) {
          error.value = '无法获取学生学号';
          return;
        }
        
        const response = await fetch(`/attendance/record?studentNumber=${studentNumber}`, {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          attendanceRecords.value = result.data || [];
          success.value = '考勤记录加载成功';
        } else {
          error.value = result.msg || '获取考勤记录失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 获取考勤状态文本
    const getAttendanceStatusText = (status) => {
      switch (status) {
        case '1': return '出勤';
        case '2': return '缺勤';
        case '3': return '迟到';
        case '4': return '请假';
        case '5': return '早退';
        default: return '未知';
      }
    };

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    };

    // 初始化
    onMounted(async () => {
      await loadUserProfile();
    });

    return {
      userProfile,
      selectedChild,
      attendanceRecords,
      error,
      success,
      selectChild,
      loadChildAttendanceRecords,
      getAttendanceStatusText,
      formatDate
    };
  }
};
</script>

<style scoped>
.attendance-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.user-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.child-selection {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.child-selection h2 {
  margin-top: 0;
}

.child-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.child-bubble {
  background-color: #e0e0e0;
  color: #333;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.child-bubble:hover {
  background-color: #bdbdbd;
  transform: scale(1.05);
}

.child-bubble.selected {
  background-color: #409EFF;
  color: white;
  transform: scale(1.1);
}

.attendance-records {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.child-info {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.child-info p {
  margin: 0;
}

.refresh-btn {
  background-color: #9E9E9E;
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 15px;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
}

.records-table th, .records-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.records-table th {
  background-color: #f2f2f2;
}

.records-table td[colspan="3"] {
  text-align: center;
  font-style: italic;
  color: #666;
}

.prompt-message {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>